<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>张裕&reg;金奖白兰地</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/awardMap.css" />
		<link rel="stylesheet" type="text/css" href="css/tool.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
	</head>

	<body>
		<div class="web">
			<div class="content">
				<!--城市的切换键部分-->
				<button class="switching_point" id="gd_button"><img src="images/switching_point_gd.png" /></button>
				<button class="switching_point" id="hn_button"><img src="images/switching_point_hn.png" /></button>
				<!--地图部分-->
				<div class="map_wrap">
					<!--广东省部分-->
					<div class="gd_map" id="gd_map">
						<img src="images/map_gd.png" class="guangdong_map" />
						<div class="map_city">
							<div class="city_icon gd_city_icon1  animated fadeInDownBig delay_100 active">
								<div class="city_text">
									<span>茂名</span><br />
									<i>11</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon2 animated fadeInDownBig delay_200">
								<div class="city_text">
									<span>阳江</span><br />
									<i>22</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon3 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>韶关</span><br />
									<i>33</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon4 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>广州</span><br />
									<i>44</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon23 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>湛江</span><br />
									<i>23</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon6 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>河源</span><br />
									<i>66</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon7 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>中山</span><br />
									<i>77</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon8 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>清远</span><br />
									<i>88</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon9 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>珠海</span><br />
									<i>99</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon10 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>佛山</span><br />
									<i>10</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon11 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>肇庆</span><br />
									<i>111</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon12 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>江门</span><br />
									<i>12</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon13 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>惠州</span><br />
									<i>13</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon14 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>揭阳</span><br />
									<i>14</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon15 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>汕尾</span><br />
									<i>15</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon16 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>梅州</span><br />
									<i>16</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon17 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>潮州</span><br />
									<i>17</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon18 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>深圳</span><br />
									<i>18</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon19 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>东莞</span><br />
									<i>19</i>
									<span>份</span>
								</div>
							</div>
							<div class="city_icon gd_city_icon22 animated fadeInDownBig delay_300">
								<div class="city_text">
									<span>汕头</span><br />
									<i>222</i>
									<span>份</span>
								</div>
							</div>
						</div>
					</div>
					<!--海南省部分-->
					<div class="hn_map" id="hn_map">
						<img src="images/map_hn.png" class="hainan_map" />
						<div class="map_city">
							<div class="city_icon hn_city_icon1 animated  delay_00">
								<div class="city_text">
									<span>三亚</span><br />
									<i>23</i><span>份</span>
								</div>
							</div>
							<div class="city_icon hn_city_icon2 animated  delay_200">
								<!--!!!!!!!!!!!!!把已领取改为已领-->
								<div class="city_text">
									<span>海口</span><br />
									<i>10</i><span>份</span>
								</div>
							</div>

						</div>
					</div>
				</div>
				<!--套装待领取部分-->
				<div class="surplus_number">
					<!--!!!!!修改动画!!!!!-->
					<h3>
						<!--剩余-->
						<span class="animated pulse infinite" >9998</span>
						<!--套-->
					</h3><br />
					<!--<h1>婚宴定制囍酒套装</h1><br />
					<h3>待领取</h3>-->
				</div>
				<!--领取规则部分-->
				<!--<div class="rule">
					<h2>领取方式：</h2>
					<p>符合领取条件的用户凭结婚证以及酒店婚宴预订单据，前往张裕白兰地线下兑换点（限广东省、海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止</p>
					<h2>领取时间：</h2>
					<p>2016年9月9日—10月29日</p>
					<h2>领取条件：</h2>
					<p>于2016年1月1日后进行婚姻登记，并在2016年9月9日—10月29日举办婚宴的新人（限广东省、海南省区域）。</p>
				</div>-->
				<img src="images/maptext.jpg" style="margin-top:-90px"/>
			</div>
			<div class="footer">
				<!--跳转按钮部分-->

				<!--!!!!!!!!!!修改了图片为背景,文体写上去-->
				<div class="button F_T animated bounceInUp">
					<a href="Search_stores.html" class="jump_button">找到离我最近的领取点</a>
				</div>
				<!--返回首页部分-->
				<a href="index.html" class="get_back"><img src="images/get_back.png" /></a>
			</div>

		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/awardMap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".city_icon").on("click", function() {
					location.href = "Redeem.html";
				})
				/************数量闪出**********************/
			var target = 5000; //目标的数量
			var i = 10000; //总数
			var clock = setInterval(function() {
				i -= 50;
				if(i <= target) {
					i = target;
					clearInterval(clock);
				}
				$(".surplus_number h3 span").text(i);
			}, 16)
		</script>
	</body>

</html>